<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
    <title>frame</title>
    <link rel="stylesheet" type="text/css" href="../css/api.css"/>
    <style>
        body {
            min-width: 320px;
        }

        .category {
            width: 100%;
            margin-top: 20px;
        }

        .category li {
            display: inline-block;
            width: 23.9%;
            text-align: center;
            padding: 30px 0 10px;
            background-size: 40px;
            background-repeat: no-repeat;
            background-position: top;
        }

        .category li a {
            margin: 15px 10px 0 10px;
        }

        .group {
            background-image: url("../image/icon_home_group@2x.png");
        }

        .self {
            background-image: url("../image/icon_home_self_service@2x.png");
        }

        .ship {
            background-image: url("../image/icon_home_ship@2x.png");
        }

        .ticket {
            background-image: url("../image/icon_home_ticket@2x.png");
        }

        .drive {
            background-image: url("../image/icon_home_drive@2x.png");
        }

        .visa {
            background-image: url("../image/icon_home_visa@2x.png");
        }

        .hotel {
            background-image: url("../image/icon_home_hotel@2x.png");
        }

        .hotspot {
            background-image: url("../image/icon_home_hotspot@2x.png");
        }

        img {
            width: 100%;
            height: 100%;
        }

        .imgs {
            padding: 10px 0;
            width: 100%;
            background-color: #F0F0F0;
            display: -webkit-box;
            display: -webkit-flex;
            display: flex;

        }

        .imgs li {
            -webkit-box-flex: 1;
            -webkit-flex: 1;
            flex: 1;
            height: 55px;
        }

        .imgs li:not(:last-child) {
            -webkit-box-flex: 1;
            -webkit-flex: 1;
            flex: 1;
            border-right: 1px solid #EDEDEB;
            height: 55px;
        }

        .img:first-of-type {
            padding-top: 0;
        }

        .img {
            height: 124px;
            padding-top: 10px;
            background-color: #F4F4F4;
            position: relative;
        }

        dt {
            height: 35px;
            line-height: 35px;
        }

        dt :first-child {
            width: 80%;
            padding-left: 10px;
        }

        dt :last-child {
            color: #3ABA63;
        }

        .detail {
            padding: 5px 10px;
            color: #A4A4A4;
            font-size: 10px;
            line-height: 18px;
            border-bottom: 1px solid #EDEDED;
        }

        .detail:first-line {
            color: #000000;
            font-size: 15px;
        }

        .price {
            font-size: 16px;
            padding-left: 10px;
            border-bottom: 1px solid #EDEDED;
            -webkit-box-flex: 1;
            -webkit-flex: 1;
            flex: 1;
            line-height: 25px;
        }

        .newPrice {
            color: #F67570;
        }

        .oldPrice {
            color: #999999;
            font-size: 10px;
            margin-left: 15px;
        }

        .zero-buy {
            border-bottom: 1px solid #EDEDED;
            display: -webkit-box;
            display: -webkit-flex;
            display: flex;
    
        }

        .zero-buy .price {
            border-bottom: none;
        }

        .buy {
            display: block;
            width: 20%;
            margin: 2px 5% 2px 0;
            background-color: #FC7924;
            color: #FFFFFF;
            text-align: center;
            padding: 5px 0;
            border-radius: 2px;
            height: 12px;
            font-size: 12px;
        }

        /*slide*/
        .swipe {
            overflow: hidden;
            position: relative;
        }

        .swipe-wrap {
            overflow: hidden;
            position: relative;
        }

        .swipe-wrap > div {
            float: left;
            width: 100%;
            position: relative;
        }

        .swipe-wrap > div {
            overflow: hidden;
            position: relative;
        }

        .swipe-wrap img {
            width: 100%;
            height: auto;
            max-height: 240px;
            min-height: 132px;
            min-width: 320px;
            max-width: 640px;
        }

        #slide {
            margin: 0 auto;
            position: relative;
        }

        .lable {
            background-image: -webkit-linear-gradient(top, rgba(59, 59, 59, .6), rgba(27, 27, 27, .6), rgba(50, 50, 50, .4), rgba(31, 31, 31, .4));
            background-image: linear-gradient(top, rgba(59, 59, 59, .6), rgba(27, 27, 27, .6), rgba(50, 50, 50, .4), rgba(31, 31, 31, .4));
            position: absolute;
            left: 0;
            bottom: 0;
            width: 100%;
            height: 30px;
            line-height: 30px;
            padding-left: 20px;
            display: block;
            color: #fff;
            -webkit-box-sizing: border-box;
            box-sizing: border-box;
        }

        #pointer {
            position: absolute;
            bottom: 12px;
            overflow: hidden;
            width: 100%;
            text-align: center;
        }

        #pointer a {
            display: inline-block;
            width: 6px;
            height: 6px;
            border-radius: 6px;
            margin-right: 4px;
            background-color: #FFFFFF;
        }

        #pointer a.active {
            background-color: #999999;
        }


    </style>
</head>

<body>
<div id='slide' class='swipe'>
    <div class='swipe-wrap' id="banner-content">
        <div onclick="" tapmode="">
            <img src="../image/45.png"/>
        </div>
        <div onclick="" tapmode="">
            <img src="../image/46.png"/>

        </div>
        <div onclick="" tapmode="">
            <img src="../image/47.png"/>
        </div>
        <div onclick="" tapmode="">
            <img src="../image/48.png"/>

        </div>
        <div onclick="" tapmode="">
            <img src="../image/49.png"/>

        </div>
        <div onclick="" tapmode="">
            <img src="../image/50.png"/>

        </div>
    </div>
    <div id="pointer">
        <a class="active"></a>
        <a></a>
        <a></a>
        <a></a>
        <a></a>
        <a></a>
        <a></a>
    </div>
</div>
<ul class="category">
    <li class="group" tapmode=""><a>
        云api
    </a></li>
    <li class="self" tapmode=""><a>
        端api
    </a></li>
    <li class="ship" tapmode=""><a>
        开发
    </a></li>
    <li class="ticket" tapmode=""><a>
        价格
    </a></li>
    <li class="drive" tapmode=""><a>
        文档
    </a></li>
    <li class="visa" tapmode=""><a>
        社区
    </a></li>
    <li class="hotel" tapmode=""><a>
        云服务
    </a></li>
    <li class="hotspot" tapmode=""><a>
        培训
    </a></li>
</ul>
<ul class="imgs">
    <li onclick="" tapmode=""><img src="../image/57.png"></li>
    <li onclick="" tapmode=""><img src="../image/58.png"></li>
    <li onclick="" tapmode=""><img src="../image/59.png"></li>
</ul>
<dl>
    <dt><span>尾货专区</span><span>更多 ></span></dt>
    <dd class="img" onclick="" tapmode="">
        <img src="../image/51.png">

        <div class="lable">10月21日 | 北京出发</div>
    </dd>
    <dd class="detail">
        北京-西欧7晚9天极致自由行<br>
        北京往返布鲁塞尔+1晚酒店，极致西欧自由的行走
    </dd>
    <dd class="price">
        <span class="newPrice">￥3399</span>
        <del class="oldPrice">￥6599</del>
    </dd>
    <dd class="img" onclick="" tapmode="">
        <img src="../image/52.png">

        <div class="lable">10月22日 | 北京出发</div>
    </dd>
    <dd class="detail">
        北京-韩国首尔7日游<br>
        超值游轮，汗蒸幕，乐天通票，奥特莱斯
    </dd>

    <dd class="price">
        <span class="newPrice">￥2099</span>
        <del class="oldPrice">￥3260</del>
    </dd>
    <dd class="img" onclick="" tapmode="">
        <img src="../image/54.png">

        <div class="lable">10月24日 | 北京出发</div>
    </dd>
    <dd class="detail">
        北京-苏梅随心5晚6日自助旅游<br>
        赠送境外旅游意外险，2人即可成团
    </dd>
    <dd class="price">
        <span class="newPrice">￥4199</span>
        <del class="oldPrice">￥5699</del>
    </dd>
    <dd class="img" onclick="" tapmode="">
        <img src="../image/55.png">

        <div class="lable">10月25日 | 北京出发</div>
    </dd>
    <dd class="detail">
        俄罗斯-贝加尔湖休闲4日游<br>
        世界最深湖，休闲胜地，只要3999
    </dd>
    <dd class="price">
        <span class="newPrice">￥3999</span>
        <del class="oldPrice">￥6599</del>
    </dd>
    <dd class="img" onclick="" tapmode="">
        <img src="../image/56.png">

        <div class="lable">10月26日 | 北京出发</div>
    </dd>
    <dd class="detail">
        莫斯科-圣彼得堡8日游<br>
        海航往返，克里姆林宫，卡洛明斯克庄园
    </dd>
    <dd class="price">
        <span class="newPrice">￥4399</span>
        <del class="oldPrice">￥7599</del>
    </dd>
</dl>
<dl>
    <dt><span>0元购专区</span><span>更多 ></span></dt>
    <dd class="img" onclick="" tapmode="">
        <img src="../image/53.png">

        <div class="lable">10月28日 | 北京出发</div>
    </dd>
    <dd class="detail">
        东京-横滨-京都-富士山6日游<br>
        途牛独家包团，EY全网最低价
    </dd>
    <dd class="zero-buy">
        <div class="price">
            <span class="newPrice">￥0</span>
            <del class="oldPrice">￥6599</del>
        </div>

        <a class="buy">立即抢购</a>
    </dd>

</dl>

<script type="text/javascript" src="../script/api.js"></script>
<script type="text/javascript" src="../script/swipe.js"></script>
<script>

    function initSlide() {
        var $pointer = $api.byId('pointer');
        window.mySlide = Swipe(slide, {
            continuous: true,
            disableScroll: true,
            stopPropagation: true,
            callback: function (index, element) {
                console.log();
                var $actA = $api.dom($pointer, 'a.active');
                $api.removeCls($actA, 'active');
                $api.addCls($api.eq($pointer, index + 1), 'active');
            },
            transitionEnd: function (index, element) {
            }
        });
    }
    initSlide();
</script>
</body>
</html>